<template>
  <div>
    <van-cell :title="apianuser.info_list[1].name" icon="notes-o" is-link @click="showPopup" />
    <van-popup v-model="show" position="right" :style="{ height: '100%',width:'100%' }">
      <van-nav-bar
        title="个人信息"
        left-text="返回"
        @click-left="onClickLeft"
        left-arrow
        :style="rgba[0]"
      />
      <div>
        <van-form validate-first @submit="onSubmit">
          <van-field
            v-model="userni"
            name="userni"
            label="昵称:"
            placeholder="请输入昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
          />
          <van-field
            v-model="mailbox"
            type="mailbox"
            name="邮箱"
            label="邮箱:"
            placeholder="请输入邮箱"
            :rules="[{ validator:mailboxs, message: '请填写正确邮箱' }]"
          />
          <van-field
            v-model="phone"
            name="phone"
            label="手机号码:"
            placeholder="请输入手机号码"
            :rules="[{ validator:phones, message: '请填写正确手机号码' }]"
          />
          <van-field
            readonly
            clickable
            name="calendar"
            :value="value"
            label="日历:"
            placeholder="点击选择日期"
            @click="showCalendar = true"
          />
          <van-calendar v-model="showCalendar" @confirm="onConfirm" />
          <van-field
            v-model="message"
            rows="2"
            autosize
            label="个性签名:"
            type="textarea"
            maxlength="50"
            placeholder="请输入个性签名"
            show-word-limit
            name="message"
          />
          <div style="margin: 16px;" ref="btoms">
            <van-button round block type="info" native-type="submit" :color="rgba[2]"  ref="btoms">提交</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "popuptow",
  props: {},
  data() {
    return {
      show: false,
      mailbox: "",
      pattern: /\d{6}/,
      phone: "",
      showCalendar: false,
      userni: "",
      message: "",
      value: "",
      apianuser: {},
      rgba: []
    };
  },
  created() {
    this.apianuser = JSON.parse(localStorage.getItem("swidata") || []);
  },
  mounted() {
    this.rgba = JSON.parse(localStorage.getItem("bakcColor") || []);
  },
  computed: {},
  methods: {
    showPopup() {
      this.show = true;
    },
    onClickLeft() {
      this.show = false;
    },
    onSubmit(values) {
      console.log("submit", values);
      localStorage.setItem("fontdatas", JSON.stringify(values));
      this.$router.push({ path: "/" });
    },
    mailboxs(val) {
      let checkEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      console.log(val);
      return checkEmail.test(val);
    },
    phones(val) {
      let checkPhone = /^1(3|4|5|6|7|8)\d{9}$/;
      // console.log(checkPhone.test(val))
      return checkPhone.test(val);
    },
    onConfirm(date) {
      this.value = `${date.getMonth() + 1}/${date.getDate()}`;
      this.showCalendar = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/user/popuptow.scss";
</style>